import { Select } from 'antd'
import { CSSProperties } from 'react'
import { IFornItem, IOption } from './interface'
const { Option } = Select;

export type operatorkey = 'equeals' | 'less' | 'greater' | 'notEqueals' | 'lessEqueals' | 'greaterEqueals' | 'in' | 'notIn' | 'like';

interface IScope extends IFornItem<string> {
  cls: string;
  datakey: string;
  style?: CSSProperties,
  operatorOption: IOption[]
}

const operatorLabel = {
  equeals: '=',
  less: '<',
  greater: '>',
  notEqueals: '≠',
  lessEqueals: '≤',
  greaterEqueals: '≥',
  in: '数据包含',
  notIn: '数据不包含',
  like: '文本包含'
}

const operatorValue = {
  equeals: '_eq',
  less: '_lt',
  greater: '_gt',
  notEqueals: '_neq',
  lessEqueals: '_lte',
  greaterEqueals: '_gte',
  in: '_in',
  notIn: '_nin',
  like: '_like'
}

const defaultOption = [
  {
    label: operatorLabel.equeals,
    value: 'equeals',
  },
  {
    label: operatorLabel.notEqueals,
    value: 'notEqueals',
  },
  {
    label: operatorLabel.greater,
    value: 'greater',
  },
  {
    label: operatorLabel.less,
    value: 'less',
  },
  {
    label: operatorLabel.lessEqueals,
    value: 'lessEqueals',
  },
  {
    label: operatorLabel.greaterEqueals,
    value: 'greaterEqueals',
  },
  {
    label: operatorLabel.in,
    value: 'in',
  },
  {
    label: operatorLabel.notIn,
    value: 'notIn',
  },
  {
    label: operatorLabel.like,
    value: 'like',
  }
];

export const getOperator = (type: operatorkey) => {
  let operator: operatorkey = 'equeals';
  if (type) {
    operator = type
  }
  return operatorValue[operator] ? operatorValue[operator] : type
}


/**
 * 运算符组件
 * **/
export const Operator = (props: IScope) => {
  const cls = props.cls ? props.cls + '-operator' : '';
  const operatorOption = props.operatorOption ?? defaultOption;

  function handleChange(value: string) {
    props.onChange({
      [props.datakey]: value
    })
  };


  return <Select
    className={cls}
    placeholder={'请选择'}
    style={{
      minWidth: 100,
      ...props.style
    }}
    defaultValue={props.value ?? 'equeals'}
    onChange={handleChange}>
    {
      operatorOption.map((item) => {
        return <Option key={item.value} value={item.value}>{item.label}</Option>
      })
    }
  </Select>
}